<w-loader ng-if="!$ctrl.loaded"></w-loader>
<w-error-block ng-show="$ctrl.loadingError"></w-error-block>
<div class="create-order"
     w-i18n-ns="app.dex"
     ng-if="$ctrl.loaded">

    <div class="head">
        <div class="icon-drag margin-right-1"></div>
        <div class="footnote-2 disabled-900">{{$ctrl.amountDisplayName}} / {{$ctrl.priceDisplayName}}</div>
        <div class="icon-close"
             ng-if="$ctrl.step !== 0"
             ng-click="$ctrl.closeCreateOrder()"></div>
    </div>

    <div class="body">

        <div class="making-order" ng-class="$ctrl.type">
            <div class="areas">
                <div w-analytics event="'DEX Buy Click'"
                     event-target="'ui'"
                     event-params='{Pair: $ctrl.analyticsPair}'
                     class="area buy"
                     ng-click="$ctrl.expand('buy')">
                    <div class="name headline-4 basic-700" w-i18n="directives.createOrder.buy"></div>
                </div>
                <div w-analytics
                     event="'DEX Sell Click'"
                     event-params='{Pair: $ctrl.analyticsPair}'
                     event-target="'ui'"
                     class="area sell"
                     ng-click="$ctrl.expand('sell')">
                    <div class="name headline-4 basic-700" w-i18n="directives.createOrder.sell"></div>
                </div>
            </div>

            <div class="choice">
                <div class="choose buy"
                     ng-click="$ctrl.expand('buy')">
                    <div class="name" w-i18n="directives.createOrder.buy"></div>
                    <div class="price"
                         w-nice-number="$ctrl.ask.price"
                         precision="$ctrl.priceBalance.asset.precision"></div>
                </div>
                <div class="middle caption-3 disabled-900">
                    <div w-i18n="directives.createOrder.spread"></div>
                    <div>{{$ctrl.spreadPercent}}%</div>
                </div>
                <div class="choose sell" ng-click="$ctrl.expand('sell')">
                    <div class="name" w-i18n="directives.createOrder.sell"></div>
                    <div class="price"
                         w-nice-number="$ctrl.bid.price"
                         precision="$ctrl.priceBalance.asset.precision"></div>
                </div>
            </div>

            <div class="create-order-notification js-order-notification">
                <div ng-if="$ctrl.createOrderFailed">
                    <i class="icon"></i><span w-i18n="create.order.failed"></span>
                </div>
                <div ng-if="!$ctrl.createOrderFailed">
                    <i class="icon"></i><span w-i18n="create.order.success"></span>
                </div>
            </div>

            <div class="expandable">
                <form class="fields" novalidate name="$ctrl.order">
                    <div class="price">
                        <div class="split-half field-label">
                            <div class="basic-600" w-i18n="directives.createOrder.priceField"></div>
                            <div class="flex">
                                <span ng-if="$ctrl.ask && $ctrl.ask.price && $ctrl.ask.price !== '0'"
                                      ng-class="{active: $ctrl.price.getTokens().toFixed() === $ctrl.ask.price}"
                                      ng-click="$ctrl.setAskPrice()" class="underline-dashed link">
                                    <span w-i18n="directives.createOrder.ask"></span>
                                </span>
                                <span ng-if="$ctrl.bid && $ctrl.bid.price && $ctrl.bid.price !== '0'"
                                      ng-class="{active: $ctrl.price.getTokens().toFixed() === $ctrl.bid.price}"
                                      ng-click="$ctrl.setBidPrice()" class="underline-dashed link">
                                    <span w-i18n="directives.createOrder.bid"></span>
                                </span>
                                <span ng-if="$ctrl.lastTradePrice"
                                      ng-class="{active: $ctrl.price.getTokens().toFixed() === $ctrl.lastTradePrice.getTokens().toFixed()}"
                                      ng-click="$ctrl.setLastPrice()" class="underline-dashed link">
                                    <span w-i18n="directives.createOrder.last"></span>
                                </span>
                            </div>
                        </div>

                        <w-input-container ng-class="{'invalid': $ctrl.isPriceInvalid()}">
                            <div class="input-like tiny">
                                <w-input class="tiny embed no-validate-icons"
                                         tabindex="2"
                                         type="text"
                                         ng-blur="$ctrl.setChangedInput('price')"
                                         w-validate
                                         w-validator-asset="{{$ctrl.priceBalance.asset}}"
                                         w-validator-gt="0"
                                         name="price"
                                         ng-model="$ctrl.price"
                                         autocomplete="off"
                                         required></w-input>
                                <div class="asset-name-wrap">
                                    <div class="caption-1 basic-500">{{$ctrl.priceDisplayName}}</div>
                                </div>
                            </div>
                            <w-input-error message="precision" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.precision"
                                      params="{precision: $ctrl.priceBalance.asset.precision}"></span>
                            </w-input-error>
                            <w-input-error message="gt" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.required"></span>
                            </w-input-error>
                            <w-input-error message="required" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.required"></span>
                            </w-input-error>
                        </w-input-container>
                    </div>

                    <div class="amount">
                        <div class="split-half field-label">
                            <div class="caption-2 basic-600"
                                 w-i18n="directives.createOrder.amountField"></div>
                            <div ng-if="$ctrl.type === 'buy'"
                                 ng-click="$ctrl.setMaxPrice()"
                                 class="caption-2 disabled-900 underline-dashed">
                                <span w-i18n="money-currency" params="{money: $ctrl.maxPriceBalance}"></span>
                            </div>
                            <div ng-if="$ctrl.type === 'sell'"
                                 ng-click="$ctrl.setMaxAmount()"
                                 class="caption-2 disabled-900 underline-dashed">
                                <span w-i18n="money-currency" params="{money: $ctrl.maxAmountBalance}"></span>
                            </div>
                        </div>

                        <w-input-container ng-class="{'invalid': $ctrl.isAmountInvalid()}">
                            <div class="input-like tiny">
                                <w-input tabindex="1"
                                         class="tiny embed no-validate-icons"
                                         type="text"
                                         ng-blur="$ctrl.setChangedInput('amount')"
                                         w-validate
                                         w-validator-asset="{{$ctrl.amountBalance.asset}}" amount
                                         w-validator-lte="{{$ctrl.maxAmountBalance}}"
                                         w-validator-gt="0"
                                         name="amount"
                                         ng-model="$ctrl.amount"
                                         autocomplete="off"
                                         required></w-input>
                                <div class="asset-name-wrap">
                                    <div class="caption-1 basic-500">{{$ctrl.amountDisplayName}}</div>
                                </div>
                            </div>

                            <w-input-error message="required" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.required"></span>
                            </w-input-error>
                            <w-input-error message="gt" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.required"></span>
                            </w-input-error>
                            <w-input-error message="precision" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.precision"
                                      params="{precision: $ctrl.amountBalance.asset.precision}"></span>
                            </w-input-error>
                            <w-input-error message="lte" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.balance"
                                      params="{name: $ctrl.amountBalance.asset.displayName}"></span>
                            </w-input-error>
                        </w-input-container>

                        <div class="field-buttons">
                            <w-button ng-class="{active: $ctrl.isActiveBalanceButton(0.25)}"
                                      on-click="$ctrl.setAmountByBalance(0.25)"
                                      class="micro"
                                      disabled="!$ctrl.hasBalance()">
                                <span class="button">25%</span>
                            </w-button>
                            <w-button ng-class="{active: $ctrl.isActiveBalanceButton(0.5)}"
                                      on-click="$ctrl.setAmountByBalance(0.5)"
                                      class="micro"
                                      disabled="!$ctrl.hasBalance()">
                                <span class="button">50%</span>
                            </w-button>
                            <w-button ng-class="{active: $ctrl.isActiveBalanceButton(0.75)}"
                                      on-click="$ctrl.setAmountByBalance(0.75)"
                                      class="micro"
                                      disabled="!$ctrl.hasBalance()">
                                <span class="button">75%</span>
                            </w-button>
                            <w-button ng-class="{active: $ctrl.isActiveBalanceButton(1)}"
                                      on-click="$ctrl.setAmountByBalance(1)"
                                      class="micro"
                                      disabled="!$ctrl.hasBalance()">
                                <span class="button">100%</span>
                            </w-button>
                        </div>
                    </div>

                    <div class="total">
                        <div class="field-label caption-2 basic-600"
                             w-i18n="directives.createOrder.total"></div>
                        <w-input-container ng-class="{ 'invalid': $ctrl.isTotalInvalid() }">
                            <div class="input-like tiny">
                                <w-input class="tiny embed no-validate-icons"
                                         tabindex="3"
                                         type="text"
                                         name="total"
                                         ng-model="$ctrl.total"
                                         w-validate
                                         ng-blur="$ctrl.setChangedInput('total')"
                                         w-validator-asset="{{$ctrl.priceBalance.asset}}"
                                         w-validator-custom="{{$ctrl.canBuyOrder}}"
                                         w-validator-gt="0"
                                         autocomplete="off"
                                         required></w-input>
                                <div class="asset-name-wrap">
                                    <div class="caption-1 basic-500">{{$ctrl.priceDisplayName}}</div>
                                </div>
                            </div>
                            <w-input-error message="custom" hide-within="$ctrl.ERROR_DISPLAY_INTERVAL">
                                <span w-i18n="directives.createOrder.errors.balance"
                                      params="{name: $ctrl.priceBalance.asset.displayName}"></span>
                            </w-input-error>
                        </w-input-container>
                    </div>

                    <div class="expiration">

                        <div class="expiration__item" ng-if="!$ctrl.feeList.length">
                            <span class="expiration__label" w-i18n="directives.createOrder.matcherFee"></span>
                            <span class="expiration__value">{{$ctrl.fee.toFormat()}} {{($ctrl.fee.asset.ticker || $ctrl.fee.asset.displayName)}}</span>
                        </div>

                        <div class="expiration__item expiration__item-fee" ng-if="$ctrl.feeList.length">
                            <span class="expiration__label" w-i18n="directives.createOrder.matcherFee"></span>
                            <w-select class="expiration__select select__no-user-select" ng-model="$ctrl.fee" up-direction="true">
                                <w-option ng-repeat="fee in $ctrl.feeList track by fee.asset.displayName" value="fee">
                                    {{fee.toFormat()}} {{(fee.asset.ticker || fee.asset.displayName)}}
                                </w-option>
                            </w-select>
                        </div>

                        <div class="expiration__item expiration__item-acting">
                            <div class="expiration__label" w-i18n="directives.createOrder.expiration"></div>
                            <w-select class="expiration__select select__no-user-select" ng-model="$ctrl.expiration" up-direction="true">
                                <w-option ng-repeat="option in $ctrl.expirationValues track by option.name"
                                          value="::option.name"
                                          w-app-class>
                                    <span w-i18n="directives.createOrder.{{::option.name}}" w-i18n-ns="app.dex"></span>
                                </w-option>
                            </w-select>
                        </div>
                    </div>

                    <w-permit name="CAN_CREATE_ORDER" mode="on">
                        <w-button disabled="$ctrl.order.$invalid || $ctrl.order.$pristine || $ctrl.isLockedPair"
                                  class="place-order small footnote-3"
                                  on-click="$ctrl.createOrder($event, order)">
                            <span ng-if="$ctrl.type === 'sell'"
                                  w-i18n="directives.createOrder.placeSellOrder"
                                  params="{name: $ctrl.amountBalance.asset.displayName}"></span>
                            <span ng-if="$ctrl.type === 'buy'"
                                  w-i18n="directives.createOrder.placeBuyOrder"
                                  params="{name: $ctrl.amountBalance.asset.displayName}"></span>
                        </w-button>
                    </w-permit>
                    <w-permit name="CAN_CREATE_ORDER" mode="off">
                        <div class="plate-note body-3 basic-700 margin-top-1">
                            <w-permit-message
                                    literal="directives.createOrder.createOrderNotPermitted"></w-permit-message>
                        </div>
                    </w-permit>
                </form>
            </div>
        </div>

    </div>
</div>
